<template>
  <div id="safe">
    <div class="sharecover" v-show="Issharecover" @click="sharecoverBtn"></div>
    <!--二维码分享-->
    <div class="code_box" v-show="Iscodebox">
      <div ref="qrcode" class="qrcode"></div>
      <p class="qrcode_text">长按二维码进行分享</p>
    </div>
    <!--微信分享-->
    <div v-show="Issharebox" class="share_box">
      <img src="@/assets/imgs/share_right.png" />
      <p>点击右上角按钮发送给微信好友或分享到微信朋友圈</p>
    </div>
    <top-bar :title="title"></top-bar>
    <div class="safety_box">
      <p>
        <img src="@/assets/imgs/safe_bg.png" />
      </p>
      <div class="safe_box_bg">
        <div class="safety_list" v-if="Isdriver">
          <p>司机信息</p>
          <h6>
            <span class="driver_name">{{getTaxiOrderInfoData?getTaxiOrderInfoData.driver_name:''}}</span>
            <em class="driver_phone">{{getTaxiOrderInfoData?getTaxiOrderInfoData.tx_car_plate_number:''}}</em>
          </h6>
          <h6>
            <span class="driver_number">{{getDriverCompany}}</span>
          </h6>
        </div>
        <div v-else class="safety_list">
          <p>司机信息</p>
          <h6>暂无</h6>
        </div>
        <div class="safety_list">
          <p>当前位置(仅供参考)</p>
          <h6 id="formattedAddress">{{getCurrentLocation.address}}</h6>
        </div>
      </div>
      <div class="safe_bottom_box">
        <div class="share_trip">
          <p @click="shareBtn">分享行程</p>
        </div>
        <div class="safety_botttom">
          <p @click="callSafe">呼叫安全专线</p>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { Tabs, Icon, Field, InputItem, Toast, Radio, Dialog } from 'mand-mobile';
import TopBar from '@/components/TopBar';
import Loading from '@/components/loading';
import QRCode from 'qrcodejs2';
import weixinUtils from '@/common/weixinUtils';
import Utils from '@/common/pakjUtils';
import { decryptByDESModeEBC, encryptByDESModeEBC } from '@/common/encrypt';
import { mapGetters, mapActions, mapMutations } from 'vuex';
import http from '@/common/http';
var CryptoJS = require('crypto-js');
export default {
  components: {
    [Tabs.name]: Tabs,
    [Icon.name]: Icon,
    [TopBar.name]: TopBar,
    [Field.name]: Field,
    [Toast.name]: Toast,
    [Dialog.name]: Dialog,
    [Radio.name]: Radio,
    [InputItem.name]: InputItem
  },
  data() {
    return {
      title: '安全中心',
      formattedAddress: '',
      shareTripUrl: '',
      Iscodebox: false,
      Issharebox: false,
      Issharecover: false,
      qrcode: '',
      Isdriver: true
    };
  },
  created() {
    // 获取订单详情
    if (this.$route.query.orderno) {
      this.getTaxiOrderInfo(this.$route.query.orderno).then(() => {
        if (this.getTaxiOrderInfoData.driver_name === '') {
          this.Isdriver = false;
        }
      });
    } else {
      Dialog.alert({
        title: '提示',
        content: '获取不到订单号',
        confirmText: '确定'
      });
    }
  },
  mounted() {
    // 获取行程分享信息
    this.getshareTrip();
  },
  methods: {
    ...mapActions(['getTaxiOrderInfo']),
    callSafe() {
      console.log(this.getTaxiOrderInfoData.safeNumber);
      window.location.href = 'tel://' + this.getTaxiOrderInfoData.safeNumber;
    },
    getshareTrip() {
      let params = {
        order_no: this.$route.query.orderno,
        type: '2'
      };
      Loading.show();
      http.post('/pakj/order/getShareOrderUrl', params).then(res => {
        Loading.hide();
        if (res.data.code === '000000') {
          this.shareTripUrl = res.data.data.shareUrl;
          this.getshareConfig(res.data.data.shareUrl, res.data.data.shareTitle, res.data.data.shareDesc);
        } else {
          Dialog.alert({
            title: '提示',
            content: res.data.msg,
            confirmText: '确定'
          });
        }
      });
    },
    getshareConfig(shareUrl, shareTitle, shareDesc) {
      weixinUtils
        .wxConfig([
          'onMenuShareTimeline', // 分享到朋友圈接口
          'onMenuShareAppMessage', //  分享到朋友接口
          'onMenuShareQQ', // 分享到QQ接口
          'onMenuShareQZone', // 分享到qq空间
          'onMenuShareWeibo' // 分享到微博接口
          // 'updateAppMessageShareData', // 分享给朋友及分享到QQ
          // 'updateTimelineShareData ' // 分享到朋友圈及分享到QQ空间
        ])
        .then(() => {
          let shareData = {
            imgUrl: 'https://img.padj.group/pakj_logo.png', // 分享显示的缩略图地址
            link: shareUrl, // 分享地址
            desc: shareTitle, // 分享描述
            title: shareDesc, // 分享标题
            success: () => {
              // Toast({
              //     icon: 'circle-right',
              //     content: '分享成功',
              //     position: 'bottom'
              // });
              this.sharecoverBtn();
            }
          };
          wx.onMenuShareTimeline(shareData);
          wx.onMenuShareAppMessage(shareData);
          wx.onMenuShareQQ(shareData);
          wx.onMenuShareQZone(shareData);
          wx.onMenuShareWeibo(shareData);
        })
        .catch(reason => {
          // config信息验证失败会执行error函数，如签名过期导致验证失败
          // 具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看
          // 对于SPA可以在这里更新签名
          alert('好像出错了');
        });
    },
    sharecoverBtn() {
      this.Issharecover = false;
      this.Iscodebox = false;
      this.Issharebox = false;
    },
    // 分享行程
    shareBtn() {
      this.Issharecover = true;
      // 判断是微信还是h5中
      if (Utils.isWeixinBroswer()) {
        //  微信中
        this.Issharebox = true;
      } else {
        this.Iscodebox = true;
        if (!this.qrcode) {
          this.qrcode = new QRCode(this.$refs.qrcode, {
            width: 120,
            height: 120, // 高度
            text: this.shareTripUrl // 二维码链接
          });
        }
      }
    }
  },
  computed: {
    ...mapGetters(['getTaxiOrderInfoData', 'getCurrentLocation']),
    getdriverPhone() {
      var str = this.getTaxiOrderInfoData;
      if (!str) {
        return '';
      }
      var phone = str.driver_phone;
      var driverphone = phone.substr(0, 3) + '****' + phone.substr(7);
      return driverphone;
    },
    getDriverCompany() {
      var str = this.getTaxiOrderInfoData;
      if (!str) {
        return '';
      }
      if (str.operation_company.length > 16) {
        return str.operation_company.substring(0, 16) + '...';
      } else {
        return str.operation_company;
      }
    }
  }
};
</script>
<style lang="stylus">
p {
  display: block;
  margin-block-start: 0px;
  margin-block-end: 0px;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
}

h6 {
  display: block;
  font-size: 22px;
  margin-block-start: 0em;
  margin-block-end: 0em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
  font-weight: 400;
}

.sharecover {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #000;
  opacity: 0.5;
  z-index: 9999;
}

.code_box {
  position: absolute;
  z-index: 10000;
  top: 35%;
  left: 35%;
}

.qrcode_text {
  font-size: 28px;
  color: #fff;
  marign-top: 20px;
}

.share_box {
  position: absolute;
  z-index: 10000;
  right: 2%;
  top: 0px;
  font-size: 28px;
  color: #fff;
  width: 240px;
}

.share_box img {
  width: 120px;
  position: relative;
  left: 100px;
}

.share_box p {
  margin-top: 10px;
}

#safe {
  height: 100vh;
  background-color: color-primary-background;
}

.safety_box > p img {
  width: 100%;
}

.safe_box_bg {
  margin: 20px;
  background: rgba(255, 255, 255, 1);
  box-shadow: 0px 0px 8px 0px rgba(191, 191, 191, 0.5);
  border-radius: 10px;
  padding-bottom: 30px;
}

.safety_list {
  padding-left: 30px;
  padding-top: 30px;
}

.safety_list p {
  font-size: 28px;
  color: #999;
}

.safety_list h6 {
  font-size: 30px;
  font-weight: 400;
  color: #333;
  margin-right: 30px;
  margin-top: 10px;
}

.driver_sex, .driver_carColor {
  margin-left: 10px;
}

.safety_list em {
  font-style: normal;
  margin-left: 10px;
}

.safe_bottom_box {
  position: fixed;
  bottom: 20px;
  width: 100%;
}

.safety_botttom {
  margin: 0px 20px;
}

.safety_botttom p {
  text-align: center;
  height: 98px;
  line-height: 98px;
  font-size: 36px;
  color: #fff;
  background-color: #ff6917;
  border-radius: 10px;
}

.share_trip {
  margin: 20px 20px;
}

.share_trip p {
  text-align: center;
  height: 98px;
  line-height: 98px;
  font-size: 36px;
  color: #FF6917;
  border-radius: 10px;
  background: rgba(255, 255, 255, 1);
  box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.08);
}
</style>
